﻿<%@ Page Title="Chỉnh sửa hình ảnh" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/InSite.Master"
    CodeBehind="CropImage.aspx.vb" Inherits="Core.CropImage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <link rel="stylesheet" href="/static/inSite/css/jquery.Jcrop.min.css" type="text/css" media="all" />
    <script src="/static/inSite/js/jquery.Jcrop.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function getQuerystring(key, default_) {
            if (default_ == null) default_ = "";
            key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
            var qs = regex.exec(window.location.href);
            if (qs == null)
                return default_;
            else
                return qs[1];
        }
    </script>
    <script type="text/javascript">
    // CONFIG CROP ang Thumbnail
	var inWidth, inHeight, scaleWidth, scaleHeight, idMainImg, idThumb, txtX1, txtX2, txtY1, txtY2, txtWs, txtHs;
    
    idMainImg = '<%=imgMain.ClientID %>';
    idThumb = '<%=imgThumb.ClientID %>';
    // DLL thumbnail chi can X1 va Y1
    txtX1 = '<%=txtX1.ClientID %>';
    //txtX2 = 'ctl00_ContentPlaceHolder1_txtY1';
    txtY1 = '<%=txtY1.ClientID %>';
    //txtY2 = 'ctl00_ContentPlaceHolder1_lblY2';
    txtWs = '<%=txtWidthSelect.ClientID %>';
    txtHs = '<%=txtHeightSelect.ClientID %>';
	inWidth = getQuerystring('w', 0);
	inHeight = getQuerystring('h', 0);
	scaleWidth = getQuerystring('w', 0);
	scaleHeight = getQuerystring('h', 0);
	// Update style div thubnail dimension 
    $(document).ready(function() {
        $('#divThumbnail').css('width', inWidth);
        $('#divThumbnail').css('height', inHeight);
        // Hidden textbox
        $('#' + txtX1).css('display', 'none');
        $('#' + txtY1).css('display', 'none');
        $('#' + txtWs).css('display', 'none');
        $('#' + txtHs).css('display', 'none');
        $('#<%=lblSaveFolder.ClientID %>').css('display', 'none');
        $('#<%=lblImg.ClientID %>').css('display', 'none');
        $('#<%=lblImg2.ClientID %>').css('display', 'none');
    });
    
    // END CONFIG CROP ang Thumbnail
	
    jQuery(function($){
		// Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      $('#' + idMainImg).Jcrop({
		bgOpacity: 0.7,
        bgColor: 'white',
        addClass: 'jcrop-dark',
		onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: scaleWidth / scaleHeight,
		minSize: [inWidth, inHeight],
		setSelect:   [ 0, 0, inWidth, inHeight ],
      },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
      });
      function updatePreview(c){
        if (parseInt(c.w) > 0){
          var rx = inWidth / c.w;
          var ry = inHeight / c.h;
          $('#' + idThumb).css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
		  //$('#' + txtX1).val(c.x);
		  //$('#' + txtY1).val(c.y);
		  //$('#' + txtX2).val(c.x2);
		  //$('#' + txtY2).val(c.y2);
		  //$('#w').val(c.w);
		  //$('#h').val(c.h);
          $('#' + txtX1).val(c.x);
		  $('#' + txtY1).val(c.y);
          $('#' + txtWs).val(c.w);
          $('#' + txtHs).val(c.h);
      };
	});
  </script>
    <div>
        <div class="thumbImg" style="width:100%;">
            <div class="headerImg">
                Ảnh thu nhỏ:</div>
            <div style="overflow: hidden;margin-bottom: 20px;border: 1px #666 solid;" id="divThumbnail">
                <asp:Image ID="imgThumb" runat="server" CssClass="jcrop-preview" />
            </div>
            <asp:TextBox ID="txtWidthSelect" runat="server"></asp:TextBox>
            <asp:TextBox ID="txtHeightSelect" runat="server"></asp:TextBox>
            <asp:TextBox ID="txtX1" runat="server"></asp:TextBox>
            <asp:TextBox ID="txtY1" runat="server"></asp:TextBox>
            <div style="display:none;">
            <asp:Label ID="lblSaveFolder" runat="server" Text=""></asp:Label>
            <asp:Label ID="lblImg" runat="server" Text=""></asp:Label>
            <asp:Label ID="lblImg2" runat="server" Text=""></asp:Label>
            </div>
            
            <asp:Button ID="btnCrop" runat="server" Text="Crop ảnh" class="button" Height="26px" CssClass="btnCrop" />
        </div>
        <div class="mainImg">
            <div class="headerImg">
                Ảnh gốc:</div>
            <asp:Image ID="imgMain" runat="server" CssClass="ImageOrigin" />
        </div>
        
    </div>
</asp:Content>
